<template>
  <div class="step-three">
    <!-- 变压器配置 -->
    <div class="section transformer-config">
      <div class="section-title">变压器配置</div>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="12">
          <div class="config-item">
            <span class="label">变压器容量:</span>
            <el-input
              v-model="form.transformerCapacity"
              type="number"
              size="small"
              class="transformer-capacity-input"
              style="width: 200px; margin: 0 10px"
              :readonly="readonly"
              @input="handleTransformerCapacityChange"
            ></el-input>
            <span class="unit">kVA</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 储能运行模式 -->
    <div class="section operation-mode">
      <div class="section-title">储能运行模式</div>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="12">
          <div class="config-list">
            <!-- 防逆流 -->
            <div class="config-item">
              <span class="label">防逆流:</span>
              <el-switch
                v-model="form.backflowPreventionFlag"
                active-text="是"
                inactive-text="否"
                :disabled="readonly"
                @change="handleBackflowPreventionChange"
              ></el-switch>
            </div>

            <!-- 防过载 -->
            <div class="config-item">
              <span class="label">防过载:</span>
              <el-switch
                v-model="form.antiOverloadFlag"
                active-text="是"
                inactive-text="否"
                :disabled="readonly"
                @change="handleAntiOverloadChange"
              ></el-switch>
            </div>

            <!-- 充放电次数 -->
            <div class="config-item">
              <span class="label">充放电次数:</span>
              <el-radio-group
                v-model="form.chargeDischargeTimesType"
                size="small"
                :disabled="readonly"
                @change="handleChargeDischargeTimesChange"
              >
                <el-radio :label="1">一充一放</el-radio>
                <el-radio :label="2">两充两放</el-radio>
              </el-radio-group>
            </div>

            <!-- 平段充电 -->
            <div class="config-item">
              <span class="label">平段充电:</span>
              <el-radio-group
                v-model="form.flatChargeFlag"
                size="small"
                :disabled="readonly"
                @change="handleFlatChargeChange"
              >
                <el-radio :label="true">允许</el-radio>
                <el-radio :label="false">不允许</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepThree',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    stepOneId: {
      type: [Number, String],
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        transformerCapacity:
          this.formData.stepThreeData?.transformerCapacity || '',
        backflowPreventionFlag:
          this.formData.stepThreeData?.backflowPreventionFlag ?? true,
        antiOverloadFlag: this.formData.stepThreeData?.antiOverloadFlag ?? true,
        chargeDischargeTimesType:
          this.formData.stepThreeData?.chargeDischargeTimesType ?? 1,
        flatChargeFlag: this.formData.stepThreeData?.flatChargeFlag ?? false
      }
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        if (newVal && newVal.stepThreeData) {
          this.form.transformerCapacity =
            newVal.stepThreeData.transformerCapacity || ''
          this.form.backflowPreventionFlag =
            newVal.stepThreeData.backflowPreventionFlag ?? true
          this.form.antiOverloadFlag =
            newVal.stepThreeData.antiOverloadFlag ?? true
          this.form.chargeDischargeTimesType =
            newVal.stepThreeData.chargeDischargeTimesType ?? 1
          this.form.flatChargeFlag =
            newVal.stepThreeData.flatChargeFlag ?? false
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleTransformerCapacityChange() {
      this.updateFormData()
    },
    handleBackflowPreventionChange(value) {
      this.updateFormData()
    },
    handleAntiOverloadChange(value) {
      this.updateFormData()
    },
    handleChargeDischargeTimesChange(value) {
      this.updateFormData()
    },
    handleFlatChargeChange(value) {
      this.updateFormData()
    },
    updateFormData() {
      this.$emit('update:form-data', {
        ...this.formData,
        stepThreeData: {
          transformerCapacity: this.form.transformerCapacity
            ? Number(this.form.transformerCapacity)
            : null,
          backflowPreventionFlag: this.form.backflowPreventionFlag,
          antiOverloadFlag: this.form.antiOverloadFlag,
          chargeDischargeTimesType: this.form.chargeDischargeTimesType,
          flatChargeFlag: this.form.flatChargeFlag
        }
      })
    },
    // 获取第三步提交数据
    getSubmitData() {
      return {
        id: this.stepOneId ? Number(this.stepOneId) : null, // 必传，使用第一步返回的ID
        transformerCapacity: this.form.transformerCapacity
          ? Number(this.form.transformerCapacity)
          : null,
        backflowPreventionFlag: this.form.backflowPreventionFlag,
        antiOverloadFlag: this.form.antiOverloadFlag,
        chargeDischargeTimesType: this.form.chargeDischargeTimesType,
        flatChargeFlag: this.form.flatChargeFlag
      }
    },
    // 重置第三步数据（当第一步重新保存时调用）
    resetStepThreeData() {
      this.form.transformerCapacity = ''
      this.form.backflowPreventionFlag = true
      this.form.antiOverloadFlag = true
      this.form.chargeDischargeTimesType = 1
      this.form.flatChargeFlag = false
      this.updateFormData()
    }
  }
}
</script>

<style lang="scss" scoped>
.step-three {
  .section {
    margin-bottom: 30px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }

  .config-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      min-width: 120px;
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
    }

    .unit {
      color: #909399;
      font-size: 14px;
    }
  }

  .config-list {
    display: flex;
    flex-direction: column;
  }

  // 隐藏数字输入框的上下箭头
  .transformer-capacity-input {
    ::v-deep .el-input__inner {
      // 隐藏 WebKit 浏览器的上下箭头
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
      }
      // 隐藏 Firefox 的上下箭头
      -moz-appearance: textfield;
      appearance: textfield;
    }
  }
}
</style>
